<template>
  <div class="disc_page">
    <p v-for="(num,index) in discArr"
    :key="index"
    :class="className[num-1]">
    <span v-for="n in num" :key="n"></span>
    </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      className: ['one', 'two', 'three', 'four', 'five', 'six']
    }
  },
  props: ['discArr']
}
</script>

<style lang="less" scoped>
.disc_page{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
p{
  width: 100px;
  height: 100px;
  background: url(../assets/dice_bg.png) no-repeat;
  background-size: contain;
  display: flex;
  margin: 20px;
  padding: 8px;
  padding-top: 3px;
  span{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #333;
  }
}
.one{
  justify-content: center;
  align-items: center;
}
.two{
  justify-content: space-between;
  span:last-of-type{
    align-self: flex-end;
  }
}
.three{
  align-items: center;
  justify-content: space-between;
  span:last-of-type{
    align-self: flex-end;
  }
  span:first-of-type{
    align-self: start;
  }
}
.four,.six{
  flex-wrap: wrap;
  align-content: space-between;
  span:nth-child(2n){
    margin-left: 40px;
  }
}
.five{
  align-content: space-between;
  flex-wrap: wrap;
  justify-content: space-between;
  span:nth-child(2){
    margin-left: 40px;
  }
  span:nth-child(3){
    margin: 0 calc((100% - 20px) / 2);
  }
}
</style>
